<template>
    <div class="chuzhi">
        <ModalTitle title="处置部门画像" />
        <div class="chuzhi-charts" ref="chuzhiCharts"></div>
    </div>
</template>

<script>
import ModalTitle from '@/components/ModalTitle/Index.vue';
import { DuiWuJingXiHua } from '@/api/zhangzi'

export default {
    components: {
        ModalTitle
    },

    data() {
        return {

        }
    },

    mounted() {
        this.chuzhiChartsData()
    },

    methods: {
        chuzhiChartsData() {
            DuiWuJingXiHua.departmentPortraitAPI().then((res) => {
                let y = res.data.map(e => e.aging)
                let x = res.data.map(e => e.name)
                this.chuzhiChartsFn(x, y)
            })
        },
        chuzhiChartsFn(x, y) {
            let xData = x;  //x数据
            let colorList = ['#A1E3FD', '#005BC7',]
            let firstIndustry = y; //上报
            let charts = echarts.init(this.$refs.chuzhiCharts)
            let option = {
                color: colorList,
                backgroundColor: "",
                grid: {
                    top: '15%',
                    left: '0',
                    right: '0',
                    bottom: '0',
                    containLabel: true,
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                xAxis: [
                    {
                        type: 'category',
                        axisTick: {
                            show: false,
                        },
                        interval: 1,
                        axisLabel: {
                            color: 'rgba(36, 173, 254, 1)',
                            fontSize: "1.4rem"
                        },
                        axisLine: {
                            show: true
                        },
                        data: xData,
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '时限',
                        axisLabel: {
                            formatter: '{value} '
                        },
                        axisLabel: {
                            textStyle: {
                                //坐标轴颜色
                                color: '#5FD7FC',
                                fontSize: "1rem"
                            }
                        },
                        axisLine: {
                            //y轴线的颜色以及宽度
                            show: true,
                        },
                        //坐标轴线样式
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'solid', //solid实线;dashed虚线
                                color: 'rgba(36, 173, 254, 0.2)'
                            }
                        },
                    },
                ],
                series: [
                    {
                        name: "上报",
                        data: firstIndustry,
                        type: 'line',
                        smooth: true, //true曲线; false折线
                        symbol: 'none',
                        itemStyle: {
                            normal: {
                                lineStyle: {
                                    color: 'rgba(255,192,58, 0.2)', //改变折线颜色
                                    type: 'solid'
                                }
                            }
                        },
                        areaStyle: {
                            //折线图颜色半透明
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: 'rgba(255,192,58)' // 0% 处的颜色
                                }, {
                                    offset: 1, color: 'rgba(255,192,58, 0.2)' // 100% 处的颜色
                                }],
                                global: false // 缺省为 false
                            }
                        }
                    },
                ]
            }
            charts.setOption(option)
        }
    }
}
</script>

<style lang="less" scoped>
.chuzhi {
    width: 100%;
    height: 47.5rem;
    margin-top: 2.5rem;

    .chuzhi-charts {
        width: 100%;
        height: 38rem;
    }
}
</style>